<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <div class="marketSection">
      <div class="inner">
        <p class="paneltitle">{{$t('l.market_about0')}}</p>        
        <div class="toolbar clearfix">
          <div class="fr">
            <!-- <el-select
              :placeholder="$t('l.market_about2')"
              v-model="queryForm.legalCurrencyCode"
              size="small"
              @change="updateAdList"
              style="margin-right: 18px;"
            >
              <el-option
                v-for="(item,index) in legalCurrency"
                :key="item.id"
                :label="item"
                :value="index"
              ></el-option>
            </el-select> -->
            <el-select
              :placeholder="$t('l.market_about3')"
              v-model="queryForm.payMode"
              size="small"
              @change="updateAdList"
            >
              <el-option
                v-for="item in paymentList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="fl">
            <el-radio-group v-model.number="queryForm.type" size="small" @change="updateAdList">
              <el-radio-button label="2">{{$t('l.market_about1a')}}</el-radio-button>
              <el-radio-button label="1">{{$t('l.market_about1b')}}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="toolbar clearfix">
          <div class="mod-head clearfix">
            <div class="mock-a"  v-for="(item,index) in baseCurrency"
                :key="item.id"
                :value="index" :class="queryForm.baseCurrencyCode==item?'active':''" @click="updatabaseCurrencyCode(item)">{{item}}</div>
          </div>
        </div>
        <div class="apitipbox">
          <i></i>
          <div class="fl" style="padding-left: 16px;width: 95%;">
            <h2>{{$t('l.personal_21')}}</h2>
            <p>(1) {{$t('l.add_128')}}</p>
            <p style="color:#ff0000;">(2) {{$t('l.add_143')}} {{queryForm.baseCurrencyCode}} {{$t('l.add_143_1')}}</p>
            <p>(3) {{$t('l.add_129')}}</p>
          </div>
        </div>
        <div class="adTable tradeTableBuy">
          <el-table :data="myAdList" style="width: 100%">
            <el-table-column :label="$t('l.market_about7')">
              <template slot-scope="scope">{{scope.row.price}}{{scope.row.legalCurrencyCode}}</template>
            </el-table-column>
            <el-table-column :label="$t('l.market_about8')">
              <template slot-scope="scope">{{scope.row.totalQuantity}}{{scope.row.currencyCode}}</template>
            </el-table-column>
            <el-table-column prop="totalAmount" :label="$t('l.market_about9')"></el-table-column>
            <el-table-column :label="$t('l.market_about10')">
              <template
                slot-scope="scope"
              >{{scope.row.limitMin}}-{{scope.row.limitMax}}{{queryForm.type === 2 ? scope.row.legalCurrencyCode: scope.row.currencyCode}}</template>
            </el-table-column>
            <el-table-column :label="$t('l.market_about20')">
              <template slot-scope="scope">
                <span class="paybox" v-for="item in scope.row.payModes" :key="item.id">
                  <img
                    style="vertical-align:middle;"
                    v-show="item==1"
                    src="../../assets/images/pay_zfb.png"
                  />
                  <img
                    style="vertical-align:middle;"
                    v-show="item==2"
                    src="../../assets/images/pay_weixin.png"
                  />
                  <img
                    style="vertical-align:middle;"
                    v-show="item==3"
                    src="../../assets/images/pay_cards.png"
                  />
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="nickName" :label="$t('l.market_about11')"></el-table-column>
            <!--<el-table-column prop="transOrder" :label="$t('l.market_about12')"></el-table-column>-->
            <el-table-column :label="$t('l.market_about13')">
              <template slot-scope="scope">{{scope.row.avgDealTime}}{{$t('l.market_about16')}}</template>
            </el-table-column>
            <el-table-column :label="$t('l.market_about17')" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="queryForm.type==2"
                  @click="onTrade(scope.row.adId)"
                  class="btn-operate"
                >{{$t('l.market_about18')}}</el-button>
                <el-button
                  v-else
                  @click="onTrade(scope.row.adId)"
                  class="btn-operate"
                >{{$t('l.market_about23')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="transPages">
            <el-pagination
              v-show="hasPagination"
              background
              layout="prev, pager, next"
              :page-count="pageCount"
              @current-change="onCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出购买订单页面 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="526px"
      class="tradeDialog"
    >
      <div class="dialog-content">
        <el-row :gutter="50">
          <el-col :span="12">
            <div class="grid-content">{{$t('l.market_about11')}}: {{advertInfo.nickName}}</div>
          </el-col>
          <el-col :span="12">
            <div
              class="grid-content"
            >{{$t('l.market_about7')}}：{{advertInfo.price}} {{advertInfo.legalCurrencyCode}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="12">
            <div
              class="grid-content"
            >{{$t('l.market_popup0')}}：{{advertInfo.surplusQuantity}} {{advertInfo.currencyCode}}</div>
          </el-col>
          <el-col :span="12">
            <div
              class="grid-content"
            >{{$t('l.market_about10')}}：{{advertInfo.limitMin}}-{{advertInfo.limitMax}} {{queryForm.type === 2 ? advertInfo.legalCurrencyCode: advertInfo.currencyCode}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="12">
            <div class="grid-content">
              {{$t('l.market_about20')}}：
              <span v-for="item in advertInfo.payModes" :key="item.id">
                <img v-if="item==1" src="../../assets/images/pay_zfb.png" />
                <img v-if="item==2" src="../../assets/images/pay_weixin.png" />
                <img v-if="item==3" src="../../assets/images/pay_cards.png" />
              </span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">{{$t('l.market_popup1')}}：{{advertInfo.remark}}</div>
          </el-col>
        </el-row>
        <el-form label-position="top" ref="tradeDlgForm" :model="tradeDlgForm">
          <el-form-item :label="$t('l.market_popup2')">
            <span slot="label">
              {{$t('l.market_popup2')}}
              <em
                v-show="queryForm.type==1"
              >{{$t('l.market_popup11')}}：{{availableAmount}}{{advertInfo.currencyCode}}</em>
            </span>
            <el-row :gutter="8">
              <el-col :span="11">
                <el-input v-model="tradeDlgForm.quantity" maxlength="12" @change="cnyconvert">
                  <span slot="suffix" class="el-input__text">{{advertInfo.currencyCode}}</span>
                </el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">
                <img src="../../assets/images/dobuleArrow.png" alt style="vertical-align:middle;" />
              </el-col>
              <el-col :span="11">
                <el-input v-model="tradeDlgForm.totalPrice" maxlength="12" @change="usdtconvert">
                  <span slot="suffix" class="el-input__text">{{advertInfo.legalCurrencyCode}}</span>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            :label="queryForm.type === 2 ? `${$t('l.market_popup5')}` : `${$t('l.market_popup9')}`"
          >
            <el-radio-group v-model="tradeDlgForm.payModes">
              <el-radio
                v-for="item in userPayMode"
                :key="item.id"
                :label="item.value"
                :disabled="!item.enable"
                border
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible=false">{{$t('l.market_popup6')}}</el-button>
        <el-button type="primary" @click="onSubmitOrder(advertInfo)">{{$t('l.market_popup8')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="$t('l.risk_warning0')"
      :visible.sync="tradedlgVisibled"
      :close-on-click-modal="false"
      :before-close="back"
      width="600px"
      class="tipsDialog"
    >
      <div class="dialog-content">
        <p>{{$t('l.risk_warning1')}}</p>
        <p>{{$t('l.risk_warning2')}}</p>
        <p>{{$t('l.risk_warning3')}}</p>
        <p>{{$t('l.risk_warning4')}}</p>
        <p>{{$t('l.risk_warning5')}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="readRules">{{$t('l.risk_warning6')}}</el-button>
        <el-button @click="back">{{$t('l.risk_warning7')}}</el-button>
      </span>
    </el-dialog>
    <chat v-show="isLogin"></chat>
    <Footer></Footer>
  </div>
</template>
<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
import Chat from "./chat";

export default {
  components: {
    OtherHeader,
    Footer,
    Chat
  },
  data() {
    return {
      isLogin: this.$store.state.usertoken ? true : false,
      phoneEnabled: 0, // 手机状态0未绑定1已绑定
      tradedlgVisibled: false,
      hasPagination: false,
      pageCount: 1, // 总页数
      availableAmount: 0, //可用余额
      dialog: {
        title: "",
        visible: false
      },
      advertInfo: {
        payModes: [],
        remark: "",
        currencyCode: "",
        legalCurrencyCode: ""
      },
      tradeDlgForm: {
        payModes: [],
        quantity: "",
        totalPrice: ""
      },
      queryForm: {
        baseCurrencyCode:"USDT",//交易币种类型
        legalCurrencyCode: "", // 法币类型
        pageNum: 1, // 当前页
        pageSize: 10, // 每页显示记录条数
        payMode: "", // 支付方式
        type: 2 // 广告类型[1出售|2购买]
      },
      paymentList: [], // 付款方式
      payModes: [],
      enablePayModes: [],
      legalCurrency: [], // 法币列表
      baseCurrency:[],//支持币种
      myAdList: [], // 表格数据
      verifiedLevel:"",
      idType:1
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fromPath = from.path;
    });
  },
  computed: {
    userCode() {
      return this.$store.state.userintro.userCode;
    },
    userPayMode() {
      let pays = this.advertInfo.payModes;
      let payModes = Object.assign([], this.payModes);

      if (!pays.length) return [];

      return payModes
        .map(item => ({
          ...item,
          enable: this.enablePayModes.indexOf(Number(item.value)) != -1
        }))
        .filter(item => {
          return pays.indexOf(item.value) != -1;
        });
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.checkTradeTip();
      this.getUserEnablePayMode();
      this.getUserAllPayMode();
      this.getLegalCurrency();
      this.updateAdList();
      this.getCurrencies()
    },
    // 交易风险提示
    checkTradeTip() {
      let firstEntry = localStorage.getItem("trademarket.entry");
      let obj = {};

      if (!firstEntry) {
        this.tradedlgVisibled = true;
        return false;
      }

      try {
        obj = JSON.parse(firstEntry);
      } catch (error) {}

      if (this.isLogin && !obj[this.userCode]) {
        this.tradedlgVisibled = true;
        return false;
      }

      return true;
    },
    // 已阅读交易风险提示
    readRules() {
      if (!this.isLogin) {
        localStorage.setItem(
          "trademarket.entry",
          JSON.stringify({ defaults: true })
        );
      } else {
        let storage = localStorage.getItem("trademarket.entry");
        let obj = {};

        try {
          obj = JSON.parse(storage);
        } catch (error) {}

        localStorage.setItem(
          "trademarket.entry",
          JSON.stringify({
            ...obj,
            [this.userCode]: true
          })
        );
      }
      this.tradedlgVisibled = false;
    },
    // 离开此页
    back() {
      if (this.fromPath === "/") {
        this.$router.push("/");
      } else {
        this.$router.go(-1);
      }
    },
    // 实名认证
    checkAuth() {
      let { verifiedLevel, phoneEnabled,idType} = this.$store.state.userintro;
      let authurl = "";
      this.verifiedLevel = verifiedLevel;
      this.idType = idType;
      this.phoneEnabled = phoneEnabled;

      if (verifiedLevel == "") {
        authurl = "/c1Auth";
      } else if (verifiedLevel == 1) {
        authurl = "/c2Auth";
      }

      // 提示未完成C2实名认证
      if(idType==1){
        if (verifiedLevel < 3) {
          this.authurl = authurl;
          return false;
        }
      }else{
        if (verifiedLevel < 2) {
          this.authurl = authurl;
          return false;
        }
      }
      

      return true;
    },
    usdtconvert() {
      let quantity = this.tradeDlgForm.quantity;
      let totalPrice = this.tradeDlgForm.totalPrice;
      let price = this.advertInfo.price;

      quantity = totalPrice / price;
      totalPrice = String(totalPrice).replace(/^(.*\..{2}).*$/, "$1");
      quantity = String(quantity).replace(/^(.*\..{4}).*$/, "$1");
      this.tradeDlgForm.totalPrice = Number(totalPrice);
      this.tradeDlgForm.quantity = Number(quantity);
    },
    cnyconvert() {
      let quantity = this.tradeDlgForm.quantity;
      let regu = /^(\-)*(\d+)\.(\d\d).*$/;

      //先把非数字的都替换掉，除了数字和.
      quantity = quantity.replace(/[^\d.]/g, "");
      //保证只有出现一个.而没有多个.
      quantity = quantity.replace(/\.{2,}/g, ".");
      //必须保证第一个为数字而不是.
      quantity = quantity.replace(/^\./g, "");
      //保证.只出现一次，而不能出现两次以上
      quantity = quantity
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      //只能输入两个小数
      this.tradeDlgForm.quantity = quantity.replace(
        /^(\-)*(\d+)\.(\d\d\d\d).*$/,
        "$1$2.$3"
      );
      this.tradeDlgForm.totalPrice = String(
        this.mul(quantity, this.advertInfo.price)
      ).replace(/^(.*\..{2}).*$/, "$1");
    },
    mul(a, b) {
      var c = 0,
        d = a.toString(),
        e = b.toString();
      try {
        c += d.split(".")[1].length;
      } catch (f) {}
      try {
        c += e.split(".")[1].length;
      } catch (f) {}
      return (
        (Number(d.replace(".", "")) * Number(e.replace(".", ""))) /
        Math.pow(10, c)
      );
    },
    // 支持币种
    async getCurrencies(){
      let that = this;
      let res = await api.getCurrencies()
      // console.log(res.data)
      let { code, data: items, msg } = res.data;
      if (code == 0) {
        // console.log(items)
        this.baseCurrency=[
          ...items.map(item => item.code)
        ]
        // console.log('this.baseCurrency',this.baseCurrency)
      }
    },
    // 币种可用余额
    async getAvailableQuantity() {
      let res = await api.findByCurrencyCode({
        currencyCode: this.advertInfo.currencyCode
      });
      let { code, data, msg } = res.data;
      if (code == 0) {
        this.availableAmount = Number(data.availableAmount);
      }
    },
    // 点击购买或出售广告
    onTrade(adId) {
      let checkStatus = false;
      let type = this.queryForm.type;

      if (!this.isLogin) {
        this.$router.push("/login");
        return false;
      }

      if (!this.checkAuth()) {
        this.alertAuth();
        return false;
      }

      if (type == 1 && !this.checkPayment()) {
        this.alertPayment();
        return false;
      }

      if (!this.checkBindPhone()) {
        this.alertPhoneBind();
        return false;
      }

      this.dialog.title =
        type === 2 ? this.$t("l.market_about1a") : this.$t("l.market_about1b");
      this.tradeDlgForm = {
        quantity: "",
        totalPrice: ""
      };
      this.getAdInfo(adId);
    },
    // 未完成实名认证提示
    alertAuth() {
      let that = this;
      let title = this.$t("l.placing_order0");
      let btnText = this.$t("l.placing_order3");
      if(that.idType==1){
        this.$alert(
          `<h2>${this.$t("l.placing_order1")}</h2><p>${this.$t(
            "l.add_159"
          )}<p>`,
          title,
          {
            confirmButtonText: btnText,
            dangerouslyUseHTMLString: true,
            callback: action => {
              if (action === "confirm") {
                this.$router.push(that.authurl);
              }
            },
            customClass: "market-message-box"
          }
        );
      }else{
        this.$alert(
          `<h2>${this.$t("l.placing_order1")}</h2><p>${this.$t(
            "l.placing_order2"
          )}<p>`,
          title,
          {
            confirmButtonText: btnText,
            dangerouslyUseHTMLString: true,
            callback: action => {
              if (action === "confirm") {
                this.$router.push(that.authurl);
              }
            },
            customClass: "market-message-box"
          }
        );
      }
      
    },
    // 未绑定手机号码提示
    alertPhoneBind() {
      let title = this.$t("l.placing_order4");
      let btnText = this.$t("l.placing_order7");

      this.$alert(
        `<h2>${this.$t("l.placing_order5")}</h2><p>${this.$t(
          "l.placing_order6"
        )}<p>`,
        title,
        {
          confirmButtonText: btnText,
          dangerouslyUseHTMLString: true,
          callback: action => {
            if (action === "confirm") {
              this.$router.push("/bindphone");
            }
          },
          customClass: "market-message-box"
        }
      );
    },
    // 未设置收款信息提示
    alertPayment() {
      let title = this.$t("l.placing_order8");
      let btnText = this.$t("l.placing_order13");

      this.$alert(
        `<h2>${this.$t("l.placing_order10")}</h2><p>${this.$t(
          "l.placing_order11"
        )}<p>`,
        title,
        {
          confirmButtonText: btnText,
          dangerouslyUseHTMLString: true,
          callback: action => {
            if (action === "confirm") {
              this.$router.push("/paymenttype");
            }
          },
          customClass: "market-message-box"
        }
      );
    },
    // 检查是否绑定手机
    checkBindPhone() {
      return this.phoneEnabled == 1;
    },
    // 检查是否绑定收付款方式
    checkPayment() {
      return this.enablePayModes.length > 0;
    },
    // 获取广告信息
    async getAdInfo(adId) {
      let res = await api.adInfo({
        adId: adId
      });
      let { code, data, msg } = res.data;

      if (code == 0) {

        this.dialog.visible = true;
        Object.assign(this.advertInfo, data, {
          adId,
          payModes: data.payModes.split(",").sort()
        });
        this.getAvailableQuantity();
        // console.log(res.data);
      } else {
        this.dialog.visible = false;
        this.$layer.msg(msg);
      }
    },
    //获取一次性token
    async createOnceToken() {
      let res = await api.createOnceToken();
      if (res.data.code == 0) {
        this.onceToken = res.data.data.resultToken;
      }
    },
    onSubmitOrder(orderInfo) {
      if (!this.tradeDlgForm.quantity || !this.tradeDlgForm.totalPrice) {
        this.$layer.msg(this.$t("l.market_popup12"));
        return false;
      } else if (!this.tradeDlgForm.payModes) {
        this.$layer.msg(this.$t("l.market_popup13"));
        return false;
      }

      this.createOrder(orderInfo);
    },
    // 确认下单
    async createOrder(orderInfo) {
      let params = {
        adId: orderInfo.adId,
        onceToken: this.onceToken,
        payMode: this.tradeDlgForm.payModes,
        quantity: this.tradeDlgForm.quantity,
        totalPrice: this.tradeDlgForm.totalPrice
      };

      let res = await api.createOrder(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.$router.push(`/orderDetail/${data}`);
      } else if(code==3030004){
        this.$layer.msg(this.$t("l.add_100"));
      }else if(code==3030005){
        this.$layer.msg(this.$t("l.add_101"));
      }else if(code==3030010){
        this.$layer.msg(this.$t("l.add_132"));
      }else if(code==3030006){
        this.$layer.msg(this.$t("l.add_135"));
      }else if(code==3030022){
        this.$layer.msg(this.$t("l.add_136"));
      }else if(code==3030021){
        this.$layer.msg(this.$t("l.add_138"));
      }else {
        this.dialog.visible = false;
        this.$layer.msg(msg);
        this.createOnceToken();
      }
    },
    // 获取用户已启用的支付方式
    async getUserEnablePayMode() {
      let res = await api.userPayMode();
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.enablePayModes = data.map(item => item.accountType);
      } else {
        this.$layer.msg(msg);
      }
    },
    // 获取用户可用支付方式
    async getUserAllPayMode() {
      let res = await api.selectList({
        language: this.$i18n.locale,
        category: "PAY_MODES"
      });
      let { code, data: items, msg } = res.data;

      if (code == 0) {
        this.payModes = items.map(item => ({
          label: item.name,
          value: item.value
        }));
        this.paymentList = [
          {
            value: 0,
            label: this.$t("l.market_about21")
          },
          ...this.payModes
        ];
      } else {
        this.$layer.msg(msg);
      }
    },
    // 获取法币类型
    async getLegalCurrency() {
      let res = await api.selectList({
        language: this.$i18n.locale,
        category: "FIAT"
      });
      let { code, data: items, msg } = res.data;
      // console.log('res.data',res.data)
      if (code == 0) {
        this.legalCurrency = [
          this.$t("l.market_about21"),
          ...items.map(item => item.value)
        ];
        // console.log('this.legalCurrency',this.legalCurrency)
      } else {
        this.$layer.msg(msg);
      }
    },
    // 当前页面改变
    onCurrentChange(pageNum) {
      this.queryForm.pageNum = pageNum;
      this.updateAdList();
    },
    // 更新表格列表
    async updateAdList() {
      let legalCurrencyCode = this.queryForm.legalCurrencyCode;
      let payMode = this.queryForm.payMode;
      let params = {
        baseCurrencyCode: this.queryForm.baseCurrencyCode,
        legalCurrencyCode:
          legalCurrencyCode == 0 ? "" : this.legalCurrency[legalCurrencyCode], // 法币类型,查询全部为空即可
        pageNum: this.queryForm.pageNum, // 当前页
        pageSize: 15, // 每页显示记录条数
        payMode: payMode == 0 ? "" : payMode, // 支付方式,查询全部为空即可
        type: this.queryForm.type // 广告类型[1出售|2购买],查询全部为空即可
      };
      let res = await api.adList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: adList, pages } = data;
        this.myAdList = adList.map(item => ({
          adId: item.adId,
          avgDealTime: item.avgDealTime,
          currencyCode: item.currencyCode,
          legalCurrencyCode: item.legalCurrencyCode,
          limitMax: item.limitMax,
          limitMin: item.limitMin,
          nickName: item.nickName,
          payModes: item.payModes.split(",").sort(),
          price: item.price,
          totalAmount: item.totalAmount,
          totalQuantity: item.totalQuantity,
          transOrder: item.transOrder
        }));
        this.pageCount = pages;
        this.hasPagination = this.pageCount > 1;
      } else {
        this.$layer.msg(msg);
        this.myAdList = [];
        this.pageCount = 0;
        this.hasPagination = false;
      }
    },
    updatabaseCurrencyCode(item){
      this.queryForm.baseCurrencyCode=item
      this.updateAdList()
    }
  },
  mounted() {
    this.createOnceToken();
  }
};
</script>

<style lang="less" scoped>
.c2cTrade {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-bottom: 160px;
  box-sizing: border-box;
  padding-top: 100px;
  
  .marketSection {
    width: 1200px;
    margin: 20px auto 0;
    > .inner {
      background: #fff;
      border-radius: 4px;
      padding: 26px 40px;
      min-height: 830px;
      box-sizing: border-box;
    }
  }
  .paneltitle {
    font-size: 18px;
    font-weight: 600;
    color: rgba(51, 56, 94, 1);
    line-height: 100%;
    border-left: 3px solid #2D8DFE;
    padding-left: 10px;
    margin-bottom: 28px;
  }
  .adTable {
    font-size: 14px;
    color: #33385e;
    /deep/ thead tr {
      background-color: #f2f6fa;
    }
    /deep/ th {
      height: 50px;
      color: rgba(51, 56, 94, 0.6);
    }
  }
  .transPages {
    margin-top: 40px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
  }
  .toolbar {
    margin-bottom: 30px;
  }
  .paybox {
    font-size: 0;
    > img:not(last-child) {
      margin-right: 10px;
    }
  }
  .apitipbox{
      background:rgba(255,251,230,1);
      border-radius:4px;
      border:1px solid rgba(255,229,143,1);
      min-height:105px;
      padding:16px 24px;
      box-sizing: border-box;
      margin-bottom: 15px;
          overflow: hidden;
      i{
          float:left;
          width:24px;
          height:24px;
          background-image:url(../../assets/images/tip1.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size:100% 100%;
      }
      h2{
          font-size:16px;
          font-weight:500;
          color:rgba(51,56,94,1);
          line-height:24px;
      }
      p{
          color:rgba(51,56,94,1);
          line-height:22px;
          padding-top:4px;
      }
  }
}
.btn-operate {
  font-size: 14px;
  font-familyA: PingFangSC-Regular;
  font-weight: 400;
  color: #2D8DFE;
  line-height: 20px;
  height: 28px;
  padding: 0 13px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #2D8DFE;
  cursor: pointer;
}
.el-select {
  width: 130px;
}
</style>
<style lang="less">
.el-message-box.market-message-box {
  width: 452px;
  padding-bottom: 40px;
  .el-message-box__header {
    padding: 16px 15px 15px 23px;
    background: #f2f6fa;
  }
  .el-message-box__title {
    height: 24px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: #33385e;
    line-height: 24px;
  }
  .el-message-box__content {
    font-size: 14px;
    color: #33385e;
    // height: 138px;
    padding: 25px 67px 32px;
    text-align: left;
    box-sizing: border-box;
  }
  .el-message-box__btns {
    text-align: center;
  }
  .el-button {
    width: 318px;
    background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
    border-radius: 4px;
  }
  h2 {
    height: 24px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: #33385e;
    line-height: 24px;
    text-align: center;
    margin-bottom: 10px;
  }
}
.el-dialog {
  .el-dialog__header {
    color: #33385e;
    padding-left: 23px;
    background: #f2f6fa;
    .el-dialog__title {
      font-size: 16px;
      line-height: 24px;
      color: #33385e;
    }
  }
}
.tipsDialog {
  .el-dialog__body {
    color: #33385e;
    padding: 40px 52px 40px;
    text-align: left;
    font-size: 14px;
    line-height: 28px;
    em {
      font-style: normal;
      color: #2D8DFE;
    }
  }
  .el-dialog__footer {
    text-align: center;
    padding: 0 0 44px;
    .el-button {
      width: 418px;
      height: 40px;
      margin: 0;
      &:not(last-child) {
        margin-top: 20px;
      }
    }
    .el-button--primary {
      background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
      border-radius: 4px;
    }
  }
}
.el-radio-button__inner:hover{
  color:#2D8DFE;
}
.tradeDialog {
  .el-dialog__body {
    padding: 36px 50px 18px;
  }
  .el-dialog__footer {
    text-align: center;
    padding: 0 0 44px;
    .el-button {
      width: 190px;
      height: 40px;
      margin: 0;
      &:not(last-child) {
        margin-left: 12px;
      }
    }
    .el-button--primary {
      background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
      border-radius: 4px;
    }
  }
  .el-form-item {
    position: relative;
  }
  .el-form-item__label {
    font-size: 14px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 20px;
    margin-bottom: 13px;
    padding: 0;
    em {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0.5;
      font-style: normal;
    }
  }
  .el-radio {
    width: 109px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    color: #33385e;
    text-align: center;
    background: #f2f6fa;
    border-width: 0;
    box-sizing: border-box;
    &.is-checked {
      background: url(../../assets/images/pay-selected.png) no-repeat;
    }
  }
  .el-radio__label {
    padding-left: 0;
    color: #2D8DFE;
  }
  .el-radio__input {
    display: none;
  }
  .el-form {
    padding-top: 10px;
  }
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-input__suffix {
    right: 13px;
    color: #33385e;
  }
  .grid-content {
    font-familyA: OpenSans;
    min-height: 38px;
    margin-bottom: 12px;
    > span {
      display: inline-block;
      vertical-align: middle;
    }
    img {
      width: 16px;
      margin-right: 10px;
      margin-top: 2px;
    }
  }
  .rowItemNotice {
    position: absolute;
    top: -43px;
    right: 0;
    color: #33385e;
    opacity: 0.5;
  }
}

</style>
<style  scoped>
.mod-head {
    width: 100%;
    height: 34px;
    background: #f7f8fc;
    padding: 0 ;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} .mod-head {
    background: transparent;
        background: rgba(242, 246, 250, 0.4);
}
 .mod-head .mock-a {
    float: left;
    margin: 0 16px 0 0;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 400;
    color: #596a7a;
    line-height: 32px;
    cursor: pointer;
    color: #1c242c;
}
.mod-head .mock-a.active {
    color: #2D8DFE;
    border-bottom: 2px solid #2D8DFE;
    background: none;
    border-top: none;
}
</style>
